@import "../../variables.scss";

#panel-edit {
  height: 100%;

  .content {
    height: calc(100% - #{$sidebar-toolbar-size});
    max-height: calc(100% - #{$sidebar-toolbar-size});
    overflow: auto;

    .line {
      padding: 3px;
      transition: All 0.2s;

      .del-line {
        float: right;
        background: url("delete.svg") no-repeat center transparent;
        background-size: 10px;
        display: inline-block;
        width: 12px;
        height: 18px;

        &:active, &:focus {
          outline: none;
        }
      }
    }
  }

  .toolbar {
    button {
      float: left;
      opacity: 0.7;
      transition: All 0.3s;
      display: inline-block;
      width: $sidebar-toolbar-size;
      height: $sidebar-toolbar-size;

      &:hover {
        opacity: 1;
      }

      &:active, &:focus {
        outline: none;
      }

      &.new-line {
        background: url("line.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }
      &.new-curve {
        background: url("curve.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }
      &.clone {
        background: url("copy.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }

      &.mirror-h {
        background: url("mirror-horizontally.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }

      &.mirror-v {
        background: url("mirror-vertically.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }

      &.move {
        background: url("../PanelEdit/move.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }
      &.rotation {
        background: url("../PanelEdit/rotation.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }
      &.scale {
        background: url("../PanelEdit/scale.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }

      &.active {
        display: inline-block;
        background-color: rgba(0, 0, 0, 0.1);;
      }
    }
  }
}

